<template>
  <div class="branchCode clearfix" v-loading="loading">
    <div class="logoBg"><img src="~@/assets/images/common/fiveG.png" /></div>
    <div class="heading">
      收入分析：<span class="redTitle">{{ mainTopicContent }}</span>
    </div>
    <div class="content">
      <div class="echartBox clearfix">
        <div
          class="rightEchart"
          v-for="(item, index) in incomeData"
          :key="index"
        >
          <BarEchart :lineObj="item" :trendTimeArea="trendTimeArea"></BarEchart>
          <div
            :class="{
              bg: bgRedArea.indexOf(item.areaName) > -1,
              bg1: bgRedArea.indexOf(item.areaName) < 0,
            }"
          ></div>
        </div>
      </div>
      <div class="tableDiv">
        <div class="title">{{ leftTopicContent }}</div>
        <div class="tableBox">
          <el-table
            border
            stripe
            style="width: 100%"
            class="tableTh28"
            ref="table"
            :data="tableData"
          >
            <el-table-column
              v-for="(item, index) in colList"
              :key="index"
              :label="item"
              :prop="'rate' + index"
              min-width="50"
            >
              <template slot-scope="scope">
                <span v-if="index > colListLength - 4" style="color: #c00000">{{
                  scope.row["rate" + index]
                }}</span>
                <span v-else style="color: #333">{{
                  scope.row["rate" + index]
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px">
          注：收入环比平均增长率=(统计月当月收入/{{ dscAvg }}-1)/间隔月份
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarEchart from "./charts/page49Chart.vue";
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
let accountInfo = JSON.parse(getSessionStorage("accountInfo"));
export default {
  components: {
    BarEchart,
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      mainTopicContent: "",
      hangzhouData: {},
      ningboData: {},
      wenzhouData: {},
      jiaxingData: {},
      huzhouData: {},
      shaoxingData: {},
      jinhuaData: {},
      quzhouData: {},
      lishuiData: {},
      taizhouData: {},
      zhoushanData: {},
      allData: {},
      leftTopicContent: "",
      colList: [],
      tableData: [],
      bgRedArea: [],
      dscAvg: [],
      colListLength: "",
      trendTimeArea: [],
      incomeData: [],
    };
  },
  created(){
    
  },
  methods: {
    getData() {
      this.loading = true;
      $budgetAPI.getPlatformData(
        { token: this.form.token, areaId: this.form.areaId, accMonth: this.form.month },
        (res) => {
          if (res && res.code == 0) {
            this.tableData = [];
            this.colList = [];
            this.mainTopicContent = res.content.mainTopicContent;
            this.trendTimeArea = res.content.trendTimeArea;
            this.leftTopicContent = res.content.leftTopicContent;
            let str = this.leftTopicContent.split("与");
            this.dscAvg = str[1].split("环")[0];
            let object = {};
            res.content.averageIncreaseData.map((item, index) => {
              this.colList[index] = item.areaName;
              if (item.rate != null && item.rate != "") {
                object["rate" + index] = item.rate + "%";
              } else if (item.rate == 0) {
                object["rate" + index] = 0 + "%";
              } else {
                object["rate" + index] = "";
              }
            });
            this.colListLength = this.colList.length;
            this.bgRedArea = this.colList.slice(-3); //取数组的后三位
            this.tableData.push(object);
            for (let i = 0; i < this.trendTimeArea.length; i++) {
              this.trendTimeArea[i] = this.trendTimeArea[i].substring(2, 6);
            }
            let incomeData = [];
            res.content.areaTrendData.map((item, index) => {
              incomeData.push(item);
            });
            this.incomeData = incomeData;
          } else {
            this.alertError(res);
          }
          this.loading = false;
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        },
        (err) => {
          this.loading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.branchCode {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  position: relative;

  .branchCode.clearfix:after,
  .branchCode.clearfix:before {
    content: "";
    display: table;
  }

  .branchCode.clearfix:after {
    clear: both;
  }

  .branchCode.clearfix {
    *zoom: 1;
  }

  .logoBg {
    position: absolute;
    right: 20px;
    top: 20px;
  }

  .heading {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 40px;

    .redTitle {
      color: #c00000;
    }
  }

  .content {
    .tableDiv {
      .title {
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 10px;
      }

      .tableBox {
        border-top: 1px solid #9abcf1;
        border-left: 1px solid #bfbfbf;
        border-right: 1px solid #bfbfbf;
        border-bottom: 1px solid #bfbfbf;

        /deep/ .tableTh28 .el-table__header {
          .first-title.is-leaf {
            position: relative;
            border-right: 1px solid #d7e5fb !important;

            .cell {
              color: #d7e5fb;
            }
          }

          .second-title.is-leaf {
            overflow: visible;

            .cell {
              transform: translateX(-60%);
            }
          }
        }

        /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid #bfbfbf !important;
        }
      }
    }

    .desc {
      margin-bottom: 20px;

      .weightFont {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;

        .redFont {
          color: #c00000;
        }

        .normalFont {
          font-weight: normal;
          font-size: 16px;
        }

        .lingxing {
          width: 10px;
          height: 10px;
          background-color: #000000;
          transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          /* Internet Explorer */
          -moz-transform: rotate(45deg);
          /* Firefox */
          -webkit-transform: rotate(45deg);
          /* Safari 和 Chrome */
          -o-transform: rotate(45deg);
          /* Opera */
          margin-right: 7px;
          display: inline-block;
        }
      }

      .redTitle {
        color: #c00000;
        font-size: 18px;
        font-weight: 700;
        margin-top: 10px;
      }

      .normalFont {
        font-size: 16px;
      }

      .normalRedFont {
        font-size: 16px;
        color: #c00000;
      }

      .marg {
        margin-top: 20px;
      }

      .budget {
        margin-top: 20px;
      }
    }

    .echartBox {
      margin-bottom: 10px;

      .echartBox.clearfix:after,
      .echartBox.clearfix:before {
        content: "";
        display: table;
      }

      .echartBox.clearfix:after {
        clear: both;
      }

      .echartBox.clearfix {
        *zoom: 1;
      }

      .rightEchart {
        position: relative;
        display: inline-block;
        height: 200px;
        width: 32%;
        margin-right: 2%;
        &:nth-child(3n) {
          margin-right: 0;
        }

        .bg {
          position: absolute;
          left: 0;
          right: 0px;
          bottom: 20px;
          top: 30px;
          background-color: rgb(240, 222, 219);
        }

        .bg1 {
          position: absolute;
          left: 0;
          right: 0px;
          bottom: 20px;
          top: 30px;
          background-color: rgb(219, 238, 244);
        }
      }
    }
  }
}
</style>
